<template>
  <div class="mymessage">
    <el-container class="Box">
      <el-header class="titlebox" height="100px">
          <div class="titleText">
              <span style="font-weight:700">个人中心</span>
          </div>
          <div class="backBox">
              <span>
                  <el-button @click="backHome">返回首页</el-button>
              </span>
          </div>
      </el-header>
      <el-main class="mainbox">
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick" class="innerbox">
            <el-tab-pane label="个人信息" name="first">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
                  <el-form-item label="用户名" prop="username">
                    <el-input v-model="ruleForm.username"></el-input>
                  </el-form-item>
                  <el-form-item label="手机号码" prop="tel">
                    <el-input v-model="ruleForm.tel"></el-input>
                  </el-form-item>
                  <el-form-item label="支付宝账号" prop="alipay">
                    <el-input v-model="ruleForm.alipay"></el-input>
                  </el-form-item>
                  <el-form-item label="性别" prop="sex">
                    <el-radio-group v-model="ruleForm.sex">
                        <el-radio label="1">男</el-radio>
                        <el-radio label="0">女</el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="省份" prop="province">
                    <el-input v-model="ruleForm.province"></el-input>
                  </el-form-item>
                  <el-form-item label="城市" prop="city">
                    <el-input v-model="ruleForm.city"></el-input>
                  </el-form-item>
                  <el-form-item label="详细地址" prop="addr">
                    <el-input v-model="ruleForm.addr"></el-input>
                  </el-form-item>
                  <el-form-item class="btnBox">
                    <el-button @click="backHome" class="btn1">取消修改</el-button>
                    <el-button type="primary" @click="submitForm('ruleForm')" class="btn1">确定修改</el-button>
                  </el-form-item>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="账号信息" name="second">
              <el-form :model="Form" :rules="ruless" ref="Form" label-width="120px" class="demo-ruleForm">
                <el-form-item label="旧密码" prop="oldpassword">
                  <el-input type="password" v-model="Form.oldpassword" placeholder="请输入旧密码..." autocomplete="off" :show-password="true"></el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="newpassword">
                  <el-input type="password" v-model="Form.newpassword" autocomplete="off" placeholder="请输入新密码..." :show-password="true"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="repassword">
                  <el-input type="password" v-model="Form.repassword" autocomplete="off" placeholder="请再输入一次..." :show-password="true"></el-input>
                </el-form-item>
                <el-form-item class="btnBox">
                    <el-button @click="backHome" class="btn1">取消修改</el-button>
                    <el-button type="primary" @click="submit('Form')" class="btn1">确定修改</el-button>
                </el-form-item>
              </el-form>
            </el-tab-pane>
        </el-tabs>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'mymessage',
  data () {
    return {
        activeName: 'first',
        userID: '',
        ruleForm: {
            addr: "",
            alipay: "",
            city: "",
            id: this.userID,
            province: "",
            sex: '0',
            tel: "",
            username: ""
        },
        Form: {
            id: this.userID,
            newpassword: "",
            oldpassword: "",
            repassword: ""
        },
        rules: {
          username: [
            { required: true, message: '请输入用户名', trigger: 'blur' }
          ],
          tel: [
            { required: true, message: '请输入电话号码', trigger: 'blur' }
          ],
          alipay: [
            { required: true, message: '请输入支付宝账号', trigger: 'blur' }
          ],
          sex: [
            { required: true, message: '请选择性别', trigger: 'change' }
          ],
          province: [
            { required: true, message: '请输入省份', trigger: 'blur' }
          ],
          city: [
            { required: true, message: '请输入城市', trigger: 'blur' }
          ],
          addr: [
            { required: true, message: '请输入详细地址', trigger: 'blur' }
          ]
        },
        ruless: {
          oldpassword: [
            { required: true, message: '请输入旧密码', trigger: 'blur' }
          ],
          newpassword: [
            { required: true, message: '请输入新密码', trigger: 'blur' }
          ],
          repassword: [
            { required: true, message: '请再输入一次', trigger: 'blur' }
          ],
        }
    }
  },
  components: {},
  created () {
      this.getCookies()
      this.getUserInfo()
  },
  methods: {
    // 切换板块
    handleClick(tab, event) {
      console.log(tab, event)
    },
    // 获取用户个人信息
    async getUserInfo () {
      const AUTH_TOKEN = sessionStorage.getItem('usertoken')
      this.$http.defaults.headers.common['token'] = AUTH_TOKEN
      const res = await this.$http.get(`user/selectById/${this.userID}`)
      console.log(res)
      const {msg,status,data} = res.data
      if (status === 200) {
        this.ruleForm = data
        if(data.sex === '男') {
          this.ruleForm.sex = '1'
        } else {
          this.ruleForm.sex = '0'
        }
      }
    },
    // 返回首页
    backHome () {
        this.$router.push({name: 'home'})
    },
    // 获取cookies
    getCookies () {
      this.userID = sessionStorage.getItem('userId')
    },
    // 个人信息提交按钮 
    submitForm(formName) {
        this.$refs[formName].validate(async (valid) => {
          if (valid) {
            console.log(this.ruleForm)
            const res = await this.$http.put('user/updateInfo', this.ruleForm)
            console.log(res)
            if (res.data.status === 200) {
              this.$message.success('修改成功！')
              this.getUserInfo()
            } else {
              this.$message.error('error')
            }
          } else {
            console.log('error submit!!')
          }
        });
    },
    // 修改密码
    submit (formName) {
        this.$refs[formName].validate(async (valid) => {
          if (valid) {
            console.log(this.Form)
            this.Form.id = this.userID
            const res = await this.$http.put('user/updatePassword', this.Form)
            console.log(res)
            const {status} = res
            if (status === 200) {
              this.$message.success('修改成功！')
              this.dialogpswVisible = false
              this.Form = {}
            } else {
              this.$message.error('修改失败！')
            }
         } else {
            console.log('error submit!!')
          }
        });
    }
  }
}
</script>

<style scoped lang="stylus">
.Box
  height 100%
  min-width 1510px
  margin 0 0 0 0 !important
  .titlebox
    background-color #fff
    border-bottom 1px solid #aaa
    .titleText
      font 700 24px/100px microsoft yahei
      color #666
      padding-left 120px
      display inline-block
      width 1120px
    .backBox
      display inline-block
      text-align right
      line-height 130px
      padding-top 40px
      padding-right 150px
      margin 0 0 0 0 !important
  .mainbox
    padding 15px 150px 0 150px
    background-color #f2f2f2
    .innerbox
      min-height 600px
      background-color #fff
      border-radius 5px
      padding 10px 10px 10px 10px
.demo-ruleForm
  padding 40px 200px 20px 220px 
  .el-input
    width 600px
.btnBox
  text-align center
  .btn1
    margin-top 40px
    width 150px
</style>
